const ContentWrapper = styled.div`
  position: relative;
  width: ${(props) => (props.width ? props.width : "650px")};
  padding-bottom: 60px;
`;

const Footer = styled.div`
  position: absolute;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  height: 50px;
  border-top: 0.01rem solid #e0e0e0;
  background-color: #fff;

  .button {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: content;
    height: 28px;
    padding: 0px 12px;
    border-radius: 2px;
    cursor: pointer;
    transition: 0.3s;
    user-select: none;
  }

  .cancel {
    color: #000000d9;
    background-color: #fff;
    border: 1px solid #e6e6e6;

    &:hover {
      border-color: #29becf;
      color: #29becf;
      background-color: #fff;
    }

    &:active {
      border-color: #1995a8;
      color: #1995a8;
      background-color: #fff;
    }
  }

  .confirm {
    margin-left: 10px;
    margin-right: 15px;
    color: #fff;
    background-color: #29becf;
    border-color: #29becf;
    cursor: pointer;

    &:hover {
      color: #ffffff;
      background-color: #79e4e8;
      border-color: #79e4e8;
    }

    &:active {
      color: #fff;
      background-color: #1995a8;
      border-color: #1995a8;
    }
  }
`;

const App = (props) => {
  const cancel = () => {
    const { targetModal } = props;
    targetModal.close();
  };

  const confirm = () => {
    // do something

    // finally
    const { targetModal } = props;
    targetModal.close();
  };

  return (
    <>
      <ContentWrapper>{/* content */}</ContentWrapper>
      <Footer>
        <div
          className='button cancel'
          onClick={() => {
            cancel();
          }}
        >
          取消
        </div>
        <div
          className='button confirm'
          onClick={() => {
            confirm();
          }}
        >
          确认
        </div>
      </Footer>
    </>
  );
};
